<template>
  <el-container>
    <el-header>
      <h2>关键词检索</h2>
    </el-header>
    <el-main>
      <el-table :data="keywords" border>
        <el-table-column prop="id" label="检索编号" width="150" />
        <el-table-column prop="keyword" label="关键词" width="150" />
        <el-table-column prop="question" label="匹配问题" width="200" />
        <el-table-column prop="answer" label="答案描述" width="250" />
        <el-table-column
          prop="matchPercentage"
          label="匹配度（%）"
          width="120"
        />
        <el-table-column prop="relevanceScore" label="相关度评分" width="120" />
        <el-table-column prop="source" label="回答来源" width="200" />
        <el-table-column prop="note" label="备注" width="200" />
        <el-table-column label="操作" width="180">
          <template #default="scope">
            <el-button type="primary" @click="edit(scope.row)">编辑</el-button>
            <el-button type="danger" @click="deleteRow(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <el-dialog v-model="dialogVisible" title="编辑关键词">
        <el-form :model="currentItem">
          <el-form-item label="关键词">
            <el-input v-model="currentItem.keyword" />
          </el-form-item>
          <el-form-item label="匹配问题">
            <el-input v-model="currentItem.question" />
          </el-form-item>
          <el-form-item label="答案描述">
            <el-input v-model="currentItem.answer" />
          </el-form-item>
          <el-form-item label="匹配度（%）">
            <el-input v-model="currentItem.matchPercentage" type="number" />
          </el-form-item>
          <el-form-item label="相关度评分">
            <el-input v-model="currentItem.relevanceScore" type="number" />
          </el-form-item>
          <el-form-item label="回答来源">
            <el-input v-model="currentItem.source" />
          </el-form-item>
          <el-form-item label="备注">
            <el-input v-model="currentItem.note" />
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="saveEdit">保存</el-button>
          </span>
        </template>
      </el-dialog>
    </el-main>
  </el-container>
</template>

<script>
import { ref } from "vue";
import { ElMessage } from "element-plus";

export default {
  setup() {
    const keywords = ref([
      {
        id: "SR20231101",
        keyword: "垃圾清理",
        question: "如何处理街道上的垃圾？",
        answer: "通过定期巡查和居民举报，及时清理街道垃圾",
        matchPercentage: 95,
        relevanceScore: 9.0,
        source: "环境卫生管理问答库",
        note: "当前内容适合环境卫生模块"
      },
      {
        id: "SR20231102",
        keyword: "占道经营",
        question: "如何处理非法占道经营问题？",
        answer: "对违规占道商户进行通知并责令整改",
        matchPercentage: 90,
        relevanceScore: 8.5,
        source: "市容管理问答库",
        note: "常见问题，需按规范处理"
      },
      {
        id: "SR20231103",
        keyword: "噪音扰民",
        question: "夜间施工噪音如何管控？",
        answer: "规定夜间施工时间，并按规定控制噪音水平",
        matchPercentage: 92,
        relevanceScore: 8.8,
        source: "噪音控制管理问答库",
        note: "建议加入当前噪音法规说明"
      },
      {
        id: "SR20231104",
        keyword: "消防隐患",
        question: "如何排查社区消防隐患？",
        answer: "定期检查消防通道、灭火器和消防栓情况",
        matchPercentage: 88,
        relevanceScore: 8.2,
        source: "安全隐患管理问答库",
        note: "可与街道安全巡查结合管理"
      },
      {
        id: "SR20231105",
        keyword: "违章建筑",
        question: "如何处理违章建筑问题？",
        answer: "通知违建者并启动拆除程序，依法执行",
        matchPercentage: 93,
        relevanceScore: 9.2,
        source: "建筑监管问答库",
        note: "涉及多部门协调，需定期更新"
      }
    ]);

    const dialogVisible = ref(false);
    const currentItem = ref({});

    const edit = item => {
      currentItem.value = { ...item }; // 复制当前行数据
      dialogVisible.value = true; // 显示对话框
    };

    const saveEdit = () => {
      const index = keywords.value.findIndex(
        k => k.id === currentItem.value.id
      );
      if (index !== -1) {
        keywords.value[index] = { ...currentItem.value }; // 更新数据
        ElMessage.success("保存成功！");
      }
      dialogVisible.value = false; // 关闭对话框
    };

    const deleteRow = id => {
      const index = keywords.value.findIndex(k => k.id === id);
      if (index !== -1) {
        keywords.value.splice(index, 1); // 删除数据
        ElMessage.success("删除成功！");
      }
    };

    return { keywords, dialogVisible, currentItem, edit, saveEdit, deleteRow };
  }
};
</script>

<style scoped>
.el-header {
  padding: 20px;
  text-align: center;
  background-color: #f5f7fa;
}
</style>
